<template>
      <div class="point-balance views-container">
    <div class="wlm-form">
      <div class="wlm-form-hearder flex-row flex-justify-b">
        <span>提现设置</span>
      </div>
      <section>
        <div class="wlm-form-content">
              <el-form ref="from" :model="form" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="账户现有金额">
                        <span style="color:red;font-size:16px;">￥{{form.agent_money}}</span>
                    </el-form-item>
                    <el-form-item label="申请方式">
                      <el-radio-group v-model="sq_type">
                        <el-radio label="wechat">微信付款到零钱</el-radio>
                        <el-radio label="alipay">支付宝</el-radio>
                        <el-radio label="card">银行卡</el-radio>
                        
                      </el-radio-group>
                      <!-- <el-radio v-model="wechat" label="wechat">微信付款到零钱</el-radio>
                      <el-radio v-model="alipay" label="alipay">支付宝</el-radio>
                      <el-radio v-model="card" label="card">银行卡</el-radio> -->
                      <div v-if="sq_type=='wechat'">
                          微信收款人昵称:{{name?name:''}}
                           <div style="display:flex;align-items:center;">
                             <div>微信收款人头像：</div>
                             <img style="width:100px;height:50px;" :src="avatarUrl?avatarUrl:''">
                           </div>
                        <div class="form-help">注:如需更换请联系平台管理员</div>
                        </div>
                        <div v-if="sq_type=='alipay'">
                          <div>支付宝收款人：<el-input v-model="form.withdrawal_name" placeholder="请输入支付宝收款人"></el-input></div>
                          <div style="margin-top:10px;">支付宝账号：<el-input v-model="form.withdrawal_num" placeholder="请输入支付宝账号"></el-input></div>
                        </div>
                          <div v-if="sq_type=='card'">
                          <div> 银行卡号：<el-input v-model="form.withdrawal_num" placeholder="请输入银行卡号"></el-input></div>
                          <div style="margin-top:10px;">银行种类：<el-input v-model="form.withdrawal_name" placeholder="请输入银行种类"></el-input></div>
                        </div>
                    </el-form-item>
                      <el-form-item label="提现金额">
                        <el-input v-model="form.sq_money" placeholder="请输入提现金额" ></el-input>
                        <div class="form-help">
                          注：提现金额输入必须小于等于账户现有金额
                        </div>
                      </el-form-item>
                    <el-form-item label="提现服务费">
                        <span>{{agent_percent}}%</span>
                    </el-form-item>
                     <el-form-item label="实得金额">
                       <span v-if="$realgain">{{$realgain.toFixed(2)}}</span>
                     </el-form-item>
                   <el-form-item label="">
                      <el-button type="success" style="background:#1AAD19;" @click="savebtn" :loading = "loading">申请提现</el-button>
                   </el-form-item>
              </el-form>
        </div>
      </section>
    </div>
      </div>
</template>
<script>
import {getWithdrawalFinance,doWithdrawalFinance} from "@/api/cityagent";
export default {
     name: 'applywithdrawal',
     data () {
         return {
           loading:false,
            sq_type:'wechat',
            name:'',
            avatarUrl:'',
            agent_percent:'',
           form:{
            //    agent_money:'',
            //    agent_percent:'',
            withdrawal_name:'',
            withdrawal_num:'',
            sq_money:'',
           }
         }
     },
     computed: {
         $realgain(){
          return this.form.sq_money - (this.form.sq_money*this.agent_percent)/100
         }
     },
     watch: {
       'form.sq_money':{
         handler(newData, oldData){
          console.log("{{{{{{",newData,oldData)
          if(newData>=this.form.agent_money){
            this.form.sq_money=this.form.agent_money
          }
      },
       immediate: true,
        deep: true
       }
     },
     created () {
        this.$nextTick(()=>{
            this.getWithdrawalFinancebtn()
        })
     },
     methods: {
         getWithdrawalFinancebtn(){
             getWithdrawalFinance().then(res=>{
                 if(res.data.code==1){
                     this.form = res.data.data
                     this.name = res.data.data.wechat_user.nickName
                     this.avatarUrl = res.data.data.wechat_user.avatarUrl
                     this.agent_percent = res.data.data.agent_percent
                 }
             })
         },
         savebtn(){
          //  this.sq_type = this.form.sq_type
           console.log("佛挡杀己方的",this.sq_type )
           console.log("是的第三方",this.form)
            this.loading = true
           let formdata = {
              withdrawal_name:this.form.withdrawal_name,
            withdrawal_num:this.form.withdrawal_num,
            sq_money:this.form.sq_money,
            sq_type:this.sq_type
           }
           doWithdrawalFinance(formdata).then(res=>{
              if(res.data.code==1){
                console.log("132312332123",res)
                this.$message.success("申请成功！")
                 this.loading = false
                setTimeout(()=>{
                            this.$router.go(0);                            
                            },500)
              }
           }).finally(()=>{
             this.loading = false
           })
         },
     }
}
</script>